<template>
  <teleport to="body">
    <div
      ref="draggableElement"
      :class="[
        'draggable-container noscreen',
        isAbsolute ? 'draggableinit' : '',
      ]"
      isFixed
      :style="{ width: width, ...style }"
    >
      <div
        class="draggable-title"
        v-if="showHeader"
        :style="{ cursor: !isuseDraggable ? 'default' : 'grab' }"
      >
        <span class="title">
          <svg-icon class-name="iconfont active" icon-class="tiqushuxing" />
          {{ title }}</span
        >
        <slot name="header"></slot>
        <div class="close" v-if="showHeader" @click.stop="closeDialog">
          <svg-icon class-name="iconfont " icon-class="error" />
        </div>
        <div class="close closebg" v-else @click.stop="closeDialog"></div>
      </div>

      <div class="tconten">
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>

    
<script setup>
import { ref, defineProps, defineEmits, onMounted, reactive } from "vue";
import { useDraggable } from "../hook/useDraggable";
import useDebounce from "../hook/useDebounce";
import { reactify } from "@vueuse/core";
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  style: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "450px",
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  isuseDraggable: {
    type: Boolean,
    default: true,
  },
  isAbsolute: {
    type: Boolean,
    default: false,
  },
  isFixed: {
    type: Boolean,
    default: false,
  },
  isInit: {
    type: Boolean,
    default: false,
  },
  isScreen: {
    type: Boolean,
    default: true,
  },
});


const emits = defineEmits(["close"]);
const draggableElement = ref(null);
let initData;
if (props.isuseDraggable) {
  ({ initData: initData } = useDraggable(draggableElement));
}
const closeDialog = () => {
  emits("close");
};
const obServerDom = () => {
  initData();
};



onMounted(() => {
  const abc = useDebounce(obServerDom, 500);
  const resizeObserver = new ResizeObserver((entries) => {
    abc();
  });
  resizeObserver.observe(draggableElement.value);
});
</script>  
      
<style lang="scss" scoped>
.iconfont {
  width: 24px;
  height: 24px;
  font-size: 20px;
}
.draggable-container {
  min-height: 400px;
  min-width: 650px;
  background: #fff;
  border-radius: 5px;
  z-index: 99;
  max-width: 80vw;
  max-height: 80vh;
  resize: both;
  overflow: auto;
  position: absolute;
}
.noscreen {
  top: 100px;
  left: calc(50% - 325px);
  box-shadow: rgb(0 0 0 / 36%) 0px 0px 12px;
}
.shower-screen {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  background-color: #2c2f337a;
  height: 100vh;
  width: 100vw;
  z-index: 8888;
  display: flex;
  padding-top: 20vh;
  overflow: auto;
}

.draggable-title {
  cursor: grab;
  user-select: none;
  height: 38px;
  line-height: 38px;
  padding-left: 6px;
  display: flex;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  position: relative;
  border-bottom: 1px solid #e4e7ed;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding-right: 30px;
    box-sizing: border-box;
    svg {
      margin-right: 10px;
    }
  }
}
.nobg-title {
  background: rgba(0, 0, 10, 0.8);
  box-sizing: border-box;
  border: 1px solid #0e9cff;
  box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
  background-image: none;
}

.closebg:hover {
  transform: rotate(360deg);
  transition: all 1s ease;
}

.tconten {
  padding: 15px;
  box-sizing: border-box;
}
.close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>
